<!-- routing-nav -->
<input class="form-control" type="text" ng-model="RootRouting.urls" />

<div
  ng-class="{'debug-sref': debug.uisref, 'debug-view': debug.uiview}"
  class="mt-2 mb-2"
>
  <button
    class="btn bg-blue-200 hover:bg-blue-300"
    onclick="document.location.reload()"
  >
    reload plunker
  </button>
  <button
    class="btn bg-blue-200 hover:bg-blue-300"
    ng-click="RootRouting.debug.uiview = !RootRouting.debug.uiview"
  >
    {{ RootRouting.debug.uiview ? "disable" : "enable" }} ui-view debug
  </button>
  <button
    class="btn bg-blue-200 hover:bg-blue-300"
    ng-click="RootRouting.debug.uisref = !RootRouting.debug.uisref"
  >
    {{ RootRouting.debug.uisref ? "disable" : "enable" }} ui-sref debug
  </button>
  <!-- debug -->
  <button
    class="btn bg-blue-200 hover:bg-blue-300"
    ng-click="RootRouting.handleClick()"
  >
    log
  </button>
</div>
<!-- main-nav -->
<nav class="main-nav">
  <div ng-repeat="r in RootRouting.vr">
    <a ui-sref="{{ ::r }}" ui-sref-active="active"> {{ ::r }} </a>
  </div>
</nav>
<!-- main -->
<main>
  <ui-view></ui-view>
</main>

<!-- <ng-suspense>
  <suspense-fallback>
      <h2>🌀 Loading...</h2>
  </suspense-fallback>
  <suspense-default resolved="{{false}}">
      <div class="finally">Default</div>
  </suspense-default>
</ng-suspense> -->
